<template>
	<div style="width: 100%; height: 100%; padding: 0 10px">
		<div class="jjb_text">{{ orgName }}&nbsp;值班日志</div>
		<div class="drawer_box" v-if="isShows">
			<div class="date_searchbox">
				<div>
					<el-date-picker style="width: 218px" v-model="value3" type="month" value-format="YYYY-MM"
						placeholder="选择年份" @change="chanse" />
				</div>
				<div class="month_box">
					<div @click="itemClick(index, item)" class="items flex_center_center"
						v-for="(item, index) in dateArr" :key="index" :class="{ isDate: item.is }">
						{{ item.date }}
					</div>
				</div>
			</div>

			<div style="height: 100%; width: 1360px; overflow-y: scroll">
				<el-form ref="ruleFormRef" :model="formDataJJB" label-position="right" label-width="140px">
					<div class="date_box" style="margin-bottom: 10px">
						<div>
							值班日期：
							{{ isStartDate }} &nbsp;至&nbsp;
							{{ isEndDate }}
						</div>
					</div>

					<div class="jjb border_table isTable" style="border-bottom: none; margin-bottom: -1px">
						<el-table border :data="tabelLdzb" style="width: 100%">
							<el-table-column prop="title" label="" width="80" align="center" />
							<el-table-column prop="name1" label="时间" width="100">
							</el-table-column>
							<el-table-column prop="name2" label="" align="center" />
							<el-table-column prop="name3" label="" width="100" align="center" />
							<el-table-column prop="name4" label="" align="center" />
						</el-table>
					</div>


					<div class="jjb border_table isTable" style="border-bottom: none">
						<el-table :span-method="objectSpanMethod2" border :data="tableDataZb" style="width: 100%">
							<el-table-column prop="title" label="" width="80" align="center" />
							<el-table-column prop="date" label="时间" width="200">
								<template #default="scope">
									<div>
										{{ scope.row.date }} &nbsp;
										{{ scope.row.pshiftStart  + ' - ' + scope.row.pshiftEnd}}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="names" label="" width="100" align="center" />
							<el-table-column prop="b" label="" align="center" />
						</el-table>
					</div>
					<div class="jj_box" style="display: flex; width: 100%; justify-content: space-between"></div>

					<div class="jjb border_table isTable"
						style="border-bottom: none; border-top: none; margin-bottom: -1px">
						<!-- 罪犯情况 -->
						<el-table border :span-method="objectSpanMethodCv" :data="ycqkList" style="width: 100%">
							<el-table-column prop="title" label="" width="80" align="center" />
							<el-table-column prop="type" label="类型" width="136" align="center">
								<template #default="scope">
									{{ scope.row.exceptType + "" }}
								</template>
							</el-table-column>
							<el-table-column prop="content" label="情况描述">
								<template #default="scope">
									<div style="display: flex" v-for="(item, index) in getContet(scope.row.ids, '罪犯')"
										:key="index">
										<div style="margin-right: 10px" class="yc_date">
											{{
                        item.createDate.replace(/T/g, " ").split(" ")[0] +
                        " " +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[0] +
                        ":" +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[1]
                      }}
										</div>
										<div style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      " class="yc_content">
											情况： {{ item.content }}
										</div>


										<div v-if="item.handleContent" style="margin-right: 10px"
											class="yc_handleContent">
											处理： {{ item.handleContent }}
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>

					<!-- 监区情况 -->
					<div class="jjb border_table isTable" style="border-bottom: none; margin-bottom: 1px">
						<el-table border :span-method="objectSpanMethod1" :data="jqqkArr" style="width: 100%">
							<el-table-column prop="title" label="" width="80">
							</el-table-column>

							<el-table-column prop="" label="情况描述">
								<!-- 需要删除代码 -->
								<!-- <template  #default="scope"> -->
								<template>
									<div class="colmm_table">
										<div class="table_top">
											<div style="width: 80px">监区</div>
											<div style="width: 80px">监区领导</div>
											<div style="width: 60px">在册</div>
											<div style="width: 60px">在押</div>
											<div style="width: 122px">实押</div>
											<div style="width: 122px">监内住院</div>
											<div style="width: 120px">离监探亲</div>
											<div style="width: 121px">禁闭</div>
											<div style="width: 121px">惩戒训导</div>
											<div style="width: 120px">监外住院</div>
											<div style="width: 122px">监外执行</div>
											<div style="border-right: none;width: 120px">历年在逃</div>
										</div>
										<div style="border-left: 1px solid rgb(5, 112, 146)">
											<el-table border :data="sonTableData" style="width: 100%">
												<el-table-column prop="name" label="监区" width="80" align="center">
													<template #default="scope">
														<div>
															{{ scope.row.name }}
														</div>
													</template>
												</el-table-column>
												<el-table-column prop="name" label="监区领导" width="80" align="center">
													<template #default="scope">
														<div>
															{{ scope.row.jqld }}
														</div>
													</template>
												</el-table-column>

												<el-table-column prop="name" label="在册" align="center" width="60">
													<template #default="scope">
														{{ scope.row.zcfr }}
													</template>
												</el-table-column>
												<el-table-column prop="zy" label="在押" align="center" width="60">
													<template #default="scope">
														{{ scope.row.zyfr }}
													</template>
												</el-table-column>
												<el-table-column prop="syfr" label="实押" align="center">
												</el-table-column>

												<el-table-column align="center" prop="jnzy" label="监内住院" />
												<el-table-column align="center" prop="ljtq" label="离监探亲" />
												<el-table-column align="center" prop="jbfr" label="禁闭" />
												<el-table-column align="center" prop="cjxd" label="惩戒训导" />
												<el-table-column align="center" prop="jwzy" label="监外住院" />
												<el-table-column align="center" prop="jwzx" label="监外执行" />
												<el-table-column align="center" prop="lnzt" label="历年在逃">
													{{ "--" }}
												</el-table-column>
											</el-table>
										</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup>
	//需要删除代码
	import {
		ElMessage
	} from "element-plus";

	import http from "@/utils/api";
	//需要删除代码
	import jjbSaveZj from "./jjbSave.vue";
	//需要删除代码
	import {
		Search,
		Share,
		Upload,
		TakeawayBox,
		Refresh,
		Collection,
		Plus,
		Loading,
		FolderDelete,
		Back,
	} from "@element-plus/icons-vue";

	import {
		ref,
		watch,
		onMounted,
		onBeforeUnmount,
		reactive,
		onBeforeMount,
		nextTick,
		onUnmounted,
	} from "vue";

	import {
		defineProps,
		defineEmits,
		computed
	} from "vue";

	let tabelLdzb = ref([{
		name1: "总值班长",
		title: "领导",
		name2: "",
		name3: "值班主任",
		name4: "",
	}, ]);
	let ycqkList = ref([{
			title: "值班警务内容",
			exceptType: "设备运行情况",
			content: "",
		},
		{
			title: "值班警务内容",
			exceptType: "视频巡查情况",
			content: "",
		},
		{
			title: "值班警务内容",
			exceptType: "报警处置情况",
			content: "",
		},
		{
			title: "值班警务内容",
			exceptType: "有无检查",
			content: "",
		},
		{
			title: "值班警务内容",
			exceptType: "上级通知",
			content: "",
		},
		{
			title: "值班警务内容",
			exceptType: "重点监控罪犯情况",
			content: "",
		},
	]);
	let formDataJJB = ref({});
	// 声明年月日 时
	let dateSfm = ref("");
	let hour = ref("");
	let daydata = ref("");
	let years = ref("");
	let months = ref("");

	let ycqkids = ref([]);
	let byYcData = ref([]);
	let gzqkData = ref([]);
	let dateArr = ref([]);
	let formattedDateStr = ref("");
	let formattedNextDateStr = ref("");
	let isStartDate = ref("");
	let isEndDate = ref("");
	let ssDate = ref("");
	let sonBigArr = ref([]);
	let jqzbRyArr = ref([])
	//监区情况
	const jqqkList = ref([]);
	let listDatald = ref([]);
	let listData = ref([]);
	let jcNub = ref(0);
	let sonTableData = ref([{
		jq: "",
		jqld: "",
		name: "--",
		syfr: "--",
		tpfr: "--",
		zcfr: "--",
		zyfr: "--",
		jbfr: "--",
		cjxd: "--",
		jnzy: "--",
		jrxm: "--",
		jwzx: "--",
		jwzy: "--",
		ljtq: "--",
		jl: "--",
		ldfr: "--",
	}, ]);
	let jqqkArr = ref([{
		title: "狱情信息",
		exceptType: "",
		content: "",
	}, ]);
	//机构情况
	let jgqkList = ref([]);
	let isShows = ref(true);
	let start = ref("")   //原sessionStorage.getItem("pidObj")).start  声明start变量
	let end = ref("") 	//原sessionStorage.getItem("pidObj")).end  声明end变量

	const props = defineProps({
		orgIds: {
			type: Number,
			default: 22,
		},
		pids: {
			type: Number,
			default: 173,
		},
		orgName: {
			type: String,
			default: "",
		},

		menuValue: {
			type: [Number, Array],

			default: () => "22", // 如果默认值是数字，这里应该是一个函数返回数字
		},
	});
	const value3 = ref("2024");
	//需要删除代码
	const colmmTable = ref([]);
	const objectSpanMethod1 = ({
		row,
		column,
		rowIndex,
		columnIndex
	}) => {
		if (columnIndex === 0) {
			if (rowIndex == 0) {
				return {
					rowspan: 6,
					colspan: 1,
				};
			} else {
				return {
					rowspan: 0,
					colspan: 0,
				};
			}
		}
	};
	const objectSpanMethod2 = ({
		row,
		column,
		rowIndex,
		columnIndex
	}) => {
		if (columnIndex === 0) {
			if (rowIndex == 0) {
				return {
					rowspan: 4,
					colspan: 1,
				};
			} else {
				return {
					rowspan: 0,
					colspan: 0,
				};
			}
		}
	};
	const objectSpanMethodCv = ({
		row,
		column,
		rowIndex,
		columnIndex
	}) => {
		if (columnIndex === 0) {
			if (rowIndex == 0) {
				return {
					rowspan: 6,
					colspan: 1,
				};
			} else {
				return {
					rowspan: 0,
					colspan: 0,
				};
			}
		}
	};
	const emit = defineEmits(["childEvent"]);
	const tableDataZb = ref([{
			date: "白班",
			name: "领导",
			a: "",
			names: "民警",

			d: "",
			b: "",
			c: "值班日期",
			pshiftStart: "",
			pshiftEnd: "",
		},
		{
			date: "夜班",
			name: "领导",
			a: "",
			names: "民警",
			d: "",
			b: "",
			c: "值班日期",
			pshiftStart: "",
			pshiftEnd: "",
		},
	]);
	
	//需要删除代码
	onBeforeMount(() => {});
	watch(
		() => props.menuValue,
		(newValue, oldValue) => {
			getFormattedDateTime();
			value3.value = daydata.value;
			ssDate.value = daydata.value;
			if (newValue) {
				getMonthDates();
				getTimeRangeFun(daydata.value);
			}
		}, {
			deep: true, // 深度监听
			immediate: true, // 立即触发回调
		}
	);


	const getContet = (row, is) => {
		if (row && is == "罪犯") {
			if (!row) return;
			let arrs = row.split(",").filter((item) => item != "undefined");

			const result = byYcData.value.filter((item) =>
				arrs.includes(String(item.id))
			);

			return result;
		}
		if (row && is == "工作") {
			if (!row) return;

			let arrs = row.split(",").filter((item) => item != "undefined");

			const result = gzqkData.value.filter((item) =>
				arrs.includes(String(item.id))
			);

			return result;
		}
		if (row && is == "机构") {
			if (!row) return;

			let arrs = row.split(",").filter((item) => item != "undefined");

			const result = jgqkList.value.filter((item) =>
				arrs.includes(String(item.id))
			);

			return result;
		}
		if (row && is == "监区") {
			if (row == "") return;


			let arrs = row.split(",").filter((item) => item != "undefined");

			const result = jqqkList.value.filter((item) =>
				arrs.includes(String(item.id))
			);

			return result || "";
		}
	};
	// 获取年月日 时
	const getFormattedDateTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, "0");
		const day = String(now.getDate()).padStart(2, "0");
		const hours = String(now.getHours()).padStart(2, "0");
		const minutes = String(now.getMinutes()).padStart(2, "0");
		const seconds = String(now.getSeconds()).padStart(2, "0");
		dateSfm.value = `${hours}:${minutes}:${seconds}`;
		hour.value = String(now.getHours()).padStart(2, "0");
		daydata.value = `${year}-${month}-${day}`;
		years.value = `${year}`;
		months.value = `${month}`;

		return `${year}-${month}-${day} ${hour.value}`;
	};
	const getMonthDates = () => {
		const now = new Date();
		const year = Number(years.value);
		const month = Number(months.value); // 注意：月份从0开始，所以11表示12月
		// 获取当前月的天数
		const daysInMonth = new Date(year, month, 0).getDate();
		// 生成日期数组
		const dates = [];
		for (let day = 1; day <= daysInMonth; day++) {
			const dateString = `${year}-${String(month).padStart(2, "0")}-${String(
      day
    ).padStart(2, "0")}`;
			dates.push({
				date: dateString,
				is: false,
			});
		}

		dateArr.value = dates;
		dateArr.value.forEach((item) => {
			if (item.date == daydata.value) {
				item.is = true;
			}
		});
		//   return dates;
	};

	const getTimeRangeFun = async (dateString) => {
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1
		const day = String(date.getDate()).padStart(2, "0");
		// 格式化日期为 YYYY-MM-DD
		const formattedDate = `${year}-${month}-${day}`;
		// 创建第二天的日期对象
		const nextDay = new Date(date);
		nextDay.setDate(nextDay.getDate() + 1);
		const nextYear = nextDay.getFullYear();
		const nextMonth = String(nextDay.getMonth() + 1).padStart(2, "0");
		const nextDayStr = String(nextDay.getDate()).padStart(2, "0");
		// 格式化第二天的日期为 YYYY-MM-DD
		const formattedNextDate = `${nextYear}-${nextMonth}-${nextDayStr}`;
		// 返回时间段字符串
		formattedDateStr.value = formattedDate;
		formattedNextDateStr.value = formattedNextDate;
		let res = await http.znjw.ShiftLogSelect({
			page: 1,
			limit: 999,
			shiftId: props.pids,
			startDate: formattedDateStr.value + " " + "00:00:00",
			endDate: formattedNextDateStr.value + " " + "00:00:00",
		});

		if (res && res.code == 0) {
			
			if (res.data.data.length) {
				isStartDate.value =
					formattedDateStr.value +
					" " +
					res.data.data[res.data.data.length - 1].start;

				isEndDate.value =
					formattedNextDateStr.value +
					" " +
					res.data.data[res.data.data.length - 1].end;
			} else {
				isStartDate.value =
					formattedDateStr.value= start.value;
				isEndDate.value = end.value;
			}

			getExceptionReportSelect();

			getZdbSelect();

			//整点情况
			getZtFun();
		}
	};
	//异常情况数据
	const getExceptionReportSelect = async () => {
		let obj = {
			page: 1,
			limit: 99,
			orgId: props.orgIds,
			exceptType: "",
			startDate: isStartDate.value,
			endDate: isEndDate.value,
			state: "0,1",
			reportState: "0,1,2,3,4",
			reportType: "zhzx",
		};
		let res = await http.znjw.ExceptionReportSelect(obj);
		if (!res) return;
		let ycArr = res.data.data;

		if (Array.isArray(ycArr)) {
			ycqkids.value = ycArr.map((item) => item.id);
			byYcData.value = ycArr;
			ycArr.forEach((item) => {
				if (item.content) {
					ycqkList.value.forEach((itz) => {
						if (itz.exceptType == item.exceptType) {
							itz["ids"] += "," + item.id;
						}
					});
				}
			});
		}
	};
	const getZtFun = async () => {
		let res = await http.zfpt.ClockLast({
			orgId: sessionStorage.getItem("orgIds"),
			date: ssDate.value,
			hour: hour.value,
			async: "",
		});
		if (res && res.code == 0) {
			sonBigArr.value = res.data;
			if (sonBigArr.value.length) {
				return
				//报错注释sessionStorage.getItem("jqArr")
				let arr = JSON.parse(sessionStorage.getItem("jqArr"))
					.filter((item) => item.name.includes("监区"))
					.map((item) => {
						return {
							name: item.name,
							syfr: "--",
							tpfr: "--",
							zcfr: "--",
							zyfr: "--",
							jbfr: "--",
							cjxd: "--",
							jnzy: "--",
							jrxm: "--",
							jwzx: "--",
							jwzy: "--",
							ljtq: "--",

							jl: "--",
							ldfr: "--",
							orgId: item.id,
						};
					});

				sonTableData.value = arr;

				sonBigArr.value.forEach((item) => {
					if (Number(item.hour.split(":")[0]) == hour.value) {
						sonTableData.value.forEach((iot) => {
							if (iot.name == item.orgName) {
								for (let key in iot) {
									if (item[key]) {
										iot[key] = item[key];
									}
								}
							}
						});
					}
				});

				let res = await http.znjw.ZdbSelect({
					type: "jq",
					zbType: "1",
					orgId: sessionStorage.getItem("orgIds"),
					shift: "",
					account: "",
					date: ssDate.value,
				});
				if (!res) return;
				jqzbRyArr.value = res.data;

				if (jqqkArr.value.length) {
					sonTableData.value.forEach((item) => {
						jqzbRyArr.value.forEach((itz) => {
							if (item.name == itz.orgName) {
								if (itz.shiftName == '领导') {

									if (itz.zbry) {

										item["jqld"] += "," + itz.zbry;
									}
								}
							}
						});
						if (item["jqld"]) {

							item["jqld"] = item['jqld'].split(',').slice(1).join(',')

						}
					});
				}
			} else {
				sonTableData.value = [{
					jq: "",
					name: "--",
					syfr: "--",
					tpfr: "--",
					jqld: "",
					zcfr: "--",
					zyfr: "--",
					jbfr: "--",
					cjxd: "--",
					jnzy: "--",
					jrxm: "--",
					jwzx: "--",
					jwzy: "--",
					ljtq: "--",
					jl: "--",
					ldfr: "--",
				}, ];
			}
		}
	};
	const itemClick = (index, item) => {
		dateArr.value.forEach((item) => {
			item.is = false;
		});
		ssDate.value = item.date;
		getTimeRangeFun(item.date);
		dateArr.value[index].is = true;
	};
	//获取警察值班人员
	const getZdbSelect = async (zbArr) => {
		//领导
		let arrsLd = JSON.parse(sessionStorage.getItem("ldbcObj"));

		if (arrsLd?.children.length) {
			let resc = await http.znjw.ZdbSelect({
				type: "zhzxld",
				zbType: "1",
				orgId: props.orgIds || "",
				shift: arrsLd.id,
				account: "",
				date: daydata.value,
			});
			if (!resc) return;
			if (resc.code == 0) {
				let zbArrCv = resc.data;
				listDatald.value = zbArrCv;
				listDatald.value.forEach((item) => {
					if (arrsLd.children.length) {
						tabelLdzb.value.forEach((itz) => {
							if (itz.name1 == item.shiftName) {
								itz.name2 = item.zbry;
							}
							if (itz.name3 == item.shiftName) {
								itz.name4 = item.zbry;
							}
						});
					}
				});
			}
		}


		// 民警
		let arrs = JSON.parse(sessionStorage.getItem("pidObj"));
		//报错注释 arrs为null
		// if (arrs.children.length) {
		// 	tableDataZb.value = arrs.children.map((item) => {
		// 		return {
		// 			date: item.name,
		// 			title: '民警',
		// 			name: "",
		// 			a: "",
		// 			names: "值班民警",
		// 			d: "",
		// 			b: "",
		// 			c: "值班日期",
		// 			pshiftStart: item.start.slice(0, 5),
		// 			pshiftEnd: item.end.slice(0, 5) + " " + (item.next == 1 ? "(次日)" : ""),
		// 		};
		// 	});
		// }

		let res = await http.znjw.ZdbSelect({
			type: "zhzx",
			zbType: "1",
			orgId: props.orgIds || "",
			shift: "",
			account: "",
			date: formattedDateStr.value,
		});
		if (!res) return;
		if (res.code == 0) {
			let zbArr = res.data;
			listData.value = zbArr;
			listData.value.forEach((item) => {
				if (arrs.children.length) {
					tableDataZb.value.forEach((itz) => {
						jcNub.value += 1;
						if (itz.date == item.pshiftName) {
							if (itz.name == item.shiftName) {
								itz.a = item.zbry;
							}
							if (itz.names == item.shiftName) {
								itz.b = item.zbry;
							}
						}
					});
				}
			});
		}
	};
	const chanse = (row) => {
		if (row) {
			years.value = `${row.split("-")[0]}`;
			months.value = `${row.split("-")[1]}`;
			getMonthDates();
		} else {}
	};


</script>

<style scoped lang="scss">
	::v-deep .colmm_table {
		.el-table__header-wrapper {
			display: none !important;
		}

		.el-scrollbar__view {
			width: 100%;
		}
		//需要删除代码
		// .el-table .el-table__body {
		// 	border: 1px solid  rgb(5, 112, 146) !important;
		// }
	}

	.colmm_table {
		width: 100%;
		z-index: 999;
		height: 300px;
		overflow-y: scroll;
		padding-top: 10px;

		.table_top {
			height: 60px;
			width: 100%;
			display: flex;
			align-items: center;
			border: 1px solid rgb(5, 112, 146);

			div {
				border-right: 1px solid rgb(5, 112, 146);
				text-align: center;
			}
		}
	}

	::v-deep .date_searchbox {
		.el-input__wrapper {
			background-color: rgba(15, 82, 163, 0.278);
			box-shadow: (0 0 0 1px rgba(15, 82, 163, 0.61)) inset;
		}

		.el-input__inner {
			color: white;
		}

		.el-input__prefix {
			color: white;
		}
	}

	.isDate {
		color: #ffffff;
		font-weight: bold;
		border-color: rgb(18, 123, 215) !important;
	}

	.date_searchbox {
		width: 220px;
		height: 100%;
		margin-right: 6px;
	}

	.month_box {
		width: 100%;
		height: 94%;
		overflow-y: scroll;
		margin-top: 4px;

		.items {
			font-size: 14px;
			width: 100%;
			margin-bottom: 4px;
			cursor: pointer;
			height: 24px;
			color: #fff;
			border-bottom: 1px solid rgba(15, 82, 163, 0.61);
		}
	}

	.border_table {
		border: 1px solid rgba(15, 82, 163, 0.61);
		border-right: none;
	}

	.jjb_text {
		position: absolute;
		left: 60%;
		transform: translate(-50%, -50%);
		top: 144px;
		font-size: 16px;
		font-weight: bold;
		color: white;
	}

	.date_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 14px;
		padding-right: 64px;
		font-size: 14px;
		color: #e5dfdf;
	}

	.wrap_text {
		width: 60px;
		overflow-wrap: break-word;
		/* 新版浏览器支持 */
	}

	.yc_table {
		width: 100%;
		overflow-y: scroll;
		color: white;
		height: 200px;

		.table_item {
			width: 100%;
			height: 30px;
			cursor: pointer;
			height: 25px;
			justify-content: space-evenly;
			font-size: 12px;
		}
	}

	.jj_box {
		margin-bottom: 0px;
		font-size: 14px;
	}

	.drawer_box {
		width: 100%;
		height: 780px;
		display: flex;
		position: relative;
		.dialog-footer {
			position: absolute;
			bottom: -50px;
			right: 2px;
		}
	}
</style>